<template>
  <div class="app">
    <Header/>
    <div class="backorg">
      <div class="con_aon">
        
        <div class="ta_L">
          <div class="w_d_oen">
            <div class="afasafv"><h4>消息</h4></div>
            <div class="afafaga">
              <ul>
                <li><el-badge :value="12" class="item">评论</el-badge></li>
                <li><el-badge :value="1" class="item">@我的</el-badge></li>
                <li><el-badge :value="0" class="item">点赞</el-badge></li>
              </ul>
            </div>
          </div>

        </div>
        <div class="ta_list">
          <div class="nva">
              <div>
                  <ul>
                    <li>全部</li>
                    <li>我的关注</li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    </ul>
              </div>
            
            <div><input type="text" placeholder="搜索你感兴趣的内容"></div>
          </div>
          <div class="conmen">
            <div class="list">
              <div class="d_ofne_e box">
                <div class="topen_e"><img src="@/assets/img/aa.png" alt=""></div>
                <div class="tat_aa_e ">
                  <span>Lua嘟嘟</span>
                  <span class="sj">5200.15.01</span>
                </div>
              </div>
              <div class="ado_oo">
                <p>
                                    【没钱了！#世界最大印钞厂发出破产警告#：有198年历史，为英国等140个国家印制钞票】据
                    RT12月8日报道，为英国等140个国家印制钞票的德拉鲁公司发出可能破产的警告。德拉鲁公司
                    是一家英国纸币制造商，从1860年起就为英国央行印制钞票，也是世界最大的印钞厂，印制世
                    界上约1/3的钞票。如果德拉鲁公司无 ​​​​...展开全文 
                </p>
              </div>
            </div>
            <div class="list">
              <div class="d_ofne_e box">
                <div class="topen_e"><img src="@/assets/img/aa.png" alt=""></div>
                <div class="tat_aa_e">
                  <span>Lua嘟嘟</span>
                  <span class="sj">5200.15.01</span>
                </div>
              </div>
              <div class="ado_oo">
                <span>
                  #好心情好运气#   
                </span>
                <div class="is_ing">
                  <img src="@/assets/img/aa.png" alt="">
                   <img src="@/assets/img/aa.png" alt="">

                    <img src="@/assets/img/aa.png" alt="">
                     <img src="@/assets/img/aa.png" alt="">
                      <img src="@/assets/img/aa.png" alt="">
                </div>
              </div>
            </div>
            <div class="list">
              <div class="d_ofne_e box">
                <div class="topen_e"><img src="@/assets/img/aa.png" alt=""></div>
                <div class="tat_aa_e">
                  <span>Lua嘟嘟</span>
                  <span class="sj">5200.15.01</span>
                </div>
              </div>
              <div class="ado_oo">
                <p>
                  【没钱了！#世界最大印钞厂发出破产警告#：有198年历史，为英国等140个国家印制钞票】据
                    RT12月8日报道，为英国等140个国家印制钞票的德拉鲁公司发出可能破产的警告。德拉鲁公司
                    是一家英国纸币制造商，从1860年起就为英国央行印制钞票，也是世界最大的印钞厂，印制世
                    界上约1/3的钞票。如果德拉鲁公司无 ​​​​...展开全文 
                </p>
              </div>
            </div>
          </div>
        </div>
        
      </div>
    </div>
    <Footer/>
  </div>
</template>
<script>
import Header from '@/components/Header'
import Footer from '@/components/Footer'
import axios from 'axios'
import qs from 'qs'
export default {
  components: { 
    Header,
    Footer
  },
  data() {
    return {
      list:[]
    }
      
  },
  methods:{
    postdata(){
      var that = this
      let data = {
        userid: '2',
        page: '1',
        pageSize:'10',
        userType:'user'
      };
      axios({
        headers: { 'content-type': 'application/x-www-form-urlencoded' },
        method: 'post',
        url:'http://192.168.0.105:8081/forum/article/selectDynamicList',
        data: qs.stringify(data),
      })
      .then(function (res) {
        that.list = res.data.data.list;
        console.log(res.data.data.list);
      })
      .catch(function (error) {
        console.log(error);
      });
    },
    goBack(){
      this.$router.go(-1);
    },
    onDoen() {
        this.$router.push({
          path: "/InteracEa"
        });
      },
  },
  mounted() {
    this.postdata()
  },
}
</script>
<style scoped>
.app >>> .ist_l li:nth-child(5){
    background-color: #ff9381;
    width: 126px;
    height: 50px;
    display: block;
}
.afafaga >>> .el-badge__content.is-fixed {
  top: 10px
}

.backorg {
  background-color: #f06048;
}
.box {
  display: flex;
  justify-content: space-between;
}
.ouon {
  cursor: pointer;
}
.con_aon {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
.ta_list {
  width: 900px;
}
.ta_L {
  width: 280px;
  margin-top: 20px;
}
.ta_L .w_d{
  width: 280px;
  height: 80px;
  background-color: #ffffff;
}
.nva{
  width: 900px;
  height: 41px;
  background-color: #ffffff;
  margin-top: 20px;
  line-height: 40px;
  display: flex
}
.nva ul {
  display: flex
}
.nva input {
  width: 509px;
	height: 30px;
	border: solid 1px #a0a0a0;
  margin-left: 25px;
  padding-left: 10px;
}
.nva ul li {
  font-size: 18px;
  margin-left: 30px;
}
.conmen .list {
  width: 900px;
  background-color: #ffffff;
  margin-top: 10px;
}

.img_to {
    display: flex;
  justify-content: flex-end;
  padding-top: 10px;
  padding-right: 20px;

}
.img_to i {
    font-size: 29px;
    color: #797979;
}
.d_ofne {
  width: 140px;
  margin: 0 auto;
    display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.d_ofne_e {
  width: 140px;
  padding-top: 10px;
  padding-left: 20px;
}
.tat_aa_e .sj {
  font-size: 14px;
  color: #a0a0a0
}
.tat_aa{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 35px;
  margin-top: 10px;
}
.tat_aa span{
  font-size: 18px;
  text-align: center;
}
.tat_aa_e{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 35px;
  margin-top: 10px;
  line-height: 25px;
}
.tat_aa_e span{
  font-size: 18px;
  text-align: center;
}
.topen img{
  	width: 62px;
	height: 62px;
  border-radius: 50%;
  cursor: pointer;
}
.topen_e img{
  	width: 62px;
	height: 62px;
  border-radius: 50%
}
.ii_so {
  display: flex;
  width: 260px;
  margin: 20px auto;
  text-align: center;
}
.ii_so div {
  margin-left: 40px;
  margin-top: 18px;
}
.ii_so div span {
  color: #a0a0a0
}
.ii_so div p {
  font-size: 18px;
  color: black
}
.ado_oo{
  width: 746px;
	padding-bottom: 34px;
  margin: 0 auto;
}
.ado_oo p {
	font-size: 18px;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 0px;
	color: #313131;
  line-height: 30px;
}
.ado_oo span {
  color:#f06048;
}
.is_ing {
  height: 320px;
  width: 630px;
  margin: 0 auto;

}
.is_ing  img {
  width: 150px;
  height: 150px;
}
.w_d_oen {
  height: 190px;
  background-color: #ffffff
}
.na_list {
  background-color: #ffffff
}
.na_list .list {
  height: 83px;
  margin-top: 10px;
  margin-left: 14px;
}
.d_ofne_e_box {
  display: flex;
  padding-top: 10px;
}
.oenmm {
  padding-left: 10px;
}
.qucuacujaj {
  width: 79px;
	height: 28px;
  line-height: 28px;
  text-align: center;
	border-radius: 14px;
	border: solid 1px #313131;
  margin-top: 13px;
  margin-left:20px;
}
.qucuacujaj:hover {
  color: #fff;
  background-color: #f06048;
  border: solid 1px #f06048;
}
.afasafv h4{
  font-size: 17px;
  padding: 5px;
  border-bottom: 1px solid #cecece;
}
.afafaga ul li{
  height: 45px;
  line-height: 45px;
  text-align: center;
  cursor: pointer;
  font-size: 16px;

}
.afafaga ul li:hover{
  background-color: #eee
}

</style>